<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <TreeNode :obj="company" :is-rooter-node="true" @addPopshow="onAdd" />
        <el-tree
          :data="departs"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <TreeNode
            slot-scope="{ data }"
            :obj="data"
            @delDepts="getDepartmentsAPI()"
            @addPopshow="onAdd"
            @editDepts="onEdit"
          />
        </el-tree>

        <!-- 编辑弹层 -->
        <AddDeptsPop
          ref="deptsPop"
          :is-show.sync="addPopShow"
          :depts-obj="deptsObj"
          @updateDepts="getDepartmentsAPI()"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { transformListToTree } from '@/utils'
import { getDepartmentsAPI } from '@/api'
import TreeNode from './components/TreeNode'
import AddDeptsPop from './components/AddDeptsPop'
export default {
  components: {
    TreeNode,
    AddDeptsPop
  },
  data() {
    return {
      departs: [],
      defaultProps: {
        label: 'name', // 表示 从这个属性显示内容
        children: 'children'
      },
      company: {},
      addPopShow: false,
      deptsObj: {}
    }
  },
  created() {
    this.getDepartmentsAPI()
  },
  methods: {
    async getDepartmentsAPI() {
      const res = await getDepartmentsAPI()
      console.log(res)
      this.company = { name: res.companyName, manager: '负责人', id: '' }
      this.departs = transformListToTree(res.depts, '')
    },
    onAdd(obj) {
      this.addPopShow = true
      this.deptsObj = obj
    },
    onEdit(obj) {
      this.$refs.deptsPop.onEditDepts(obj.id)
      this.addPopShow = true
      this.deptsObj = obj
    }
  }
}
</script>

<style scoped>
  .tree-card {
    padding: 30px  140px;
    font-size:14px;
  }
</style>
